<template>
    <div class="templ">
        <div class="checkCode">
            <div class="title">
                <h4>选号区</h4>
            </div>
            <div class="codes">
                <div class="redBalls">
                    <div class="item">红球</div>
                    <div class="ballsBox">
                        <ul>
                            <li v-for="(redcode,index) in redList"
                                @click="activeRed(index)">
                                {{redcode}}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="blueBalls">
                    <div class="item">蓝球</div>
                    <div class="ballsBox">
                        <ul>
                            <li v-for="(bluecode,index) in blueList" @click="activeBlue(index)"
                                :class="{active:isactive === index}">{{bluecode}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="btns">
                <mt-button type="danger" size="small" @click='randomRed'>机选红球</mt-button>
                <mt-button type="primary" size="small" @click='randomBlue'>机选蓝球</mt-button>
                <mt-button type="default" size="small" @click='randomOne'>机选一注</mt-button>
            </div>
            <div class="confirm">
                <mt-button type="default" disabled size="large" id="confirmBtn" @click="saveCode">确认选号</mt-button>
            </div>
            <div class="info">
                <p>您当前投注了{{buyCount}}注彩票，共{{2*buyCount}}元</p>
                <div class="content">
                    <div class="infoBox">
                        <ul>
                            <li v-for="(b,index) in checkedBalls.data" @click="pick(index)">
                                <span v-for="red in b.red" v-if="!(isUpdate === index)">{{red}}</span>
                                <span v-if="!(isUpdate === index)">{{b.blue}}</span>
                                <input type="number" v-for="red in b.red" :value="red" class="updateBoxRed" v-if="isUpdate === index">
                                <input type="number" :value="b.blue" class="updateBoxBlue" v-if="isUpdate === index">
                                <input type="button" value="完成" class="updateBtn" @click="saveUpdate" v-if="isUpdate === index">
                            </li>
                        </ul>
                    </div>
                    <div class="option">
                        <input type="button" value="删除" @click="deleteCode">
                        <input type="button" value="修改" @click="updateCode">
                        <input type="button" value="清空" @click="emptyCodes">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import {randomNum,deleteCode,updateCode,emptyCodes,clearConfirm,pick,comfirmed} from '../../kits/common'
    export default {
        data(){
            return {
                redList: [],
                blueList: [],
                isactive: -1,//表示蓝球是否为选中状态
                redBalls: [],//记录选中的红球数，最大长度值为6
                blueBalls: [],
                checkedBalls: {type: 'ssq', data: []},
                buyCount: 0,//已选中的彩票数量
                picked: -1,//信息栏选中号码的下标
                isUpdate: -1
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                let arr1 = [];
                let arr2 = [];
                for (var i = 1; i <= 33; i++) {
                    arr1[arr1.length] = i;
                }
                for (var i = 1; i <= 16; i++) {
                    arr2[arr2.length] = i;
                }
                this.redList = arr1;
                this.blueList = arr2;
            },
            activeRed(index) {
                //将选中的红球改为active样式
                let redCount = this.redBalls.length;
                if (redCount < 6) {
                    //将选中的红球背景变为红色，将这个值加入红球的选中数组中
                    document.querySelectorAll('.redBalls li')[index].className = "active";
                    //如果当前的数值红球数组中没有就将其存进去
                    if (this.redBalls.indexOf(this.redList[index]) == -1) {
                        this.redBalls.push(this.redList[index]);
                    }
//                    console.log(this.redBalls);
                    this.confirm();
                } else {
                    Toast('目前只支持单注选号，已选完6个红球');
                }
            },
            activeBlue(index) {
                this.isactive = index;
                this.blueBalls.push(this.blueList[index]);
                this.confirm();
            },
            randomRed() {//随机选择6个红球
                this.clearReds();
                let reds = randomNum(33, 6);
                for (let i = 0; i < reds.length; i++) {
                    this.activeRed(reds[i] - 1);
                }
            },
            randomBlue() {//随机选择1个蓝球
                this.clearBlues();
                let blues = randomNum(15, 1);
                this.activeBlue(blues[0]);
            },
            randomOne(){
                this.clearReds();
                this.clearBlues();
                this.randomRed();
                this.randomBlue();
            },
            confirm() {
                //当红球和篮球的个数满足双色球的选号要求后，comfirm按钮变为可点击
                if (this.redBalls.length === 6 && this.blueBalls.length == 1) {
                    comfirmed();
                }
            },
            saveCode() {
                //1.保存选中的号码到信息区域
                let checkedObj = {};
                //红球在保存前会进行从小到大的排序
                checkedObj.red = this.redBalls.sort((a, b) => a - b);
                checkedObj.blue = this.blueBalls[0];
                //将新生成的对象存到checkedBalls对象中
                this.checkedBalls.data.push(checkedObj);

                //2.清空现有的选中状态
                this.clearReds();
                this.clearBlues();
                clearConfirm();

                //3.将选中的彩票数加1
                this.buyCount++;
            },
            clearReds(){//清空红球的状态
                for (let i = 0; i < this.redBalls.length; i++) {//将选中的小球状态和确认的按钮状态复原
                    let items = this.redBalls;
                    document.querySelectorAll('.redBalls li')[items[i] - 1].className = "";
                }
                this.redBalls = [];//将选号的数组清空
            },
            clearBlues(){//清空蓝球的状态
                this.isactive = -1;
                this.blueBalls = [];
            },
            pick(index) {//设置选号栏选项状态
                this.picked = pick(this.picked,index);
            },
            deleteCode() {
                this.buyCount = deleteCode(this.checkedBalls.data,this.picked,this.buyCount);
            },
            updateCode(){//修改选中的号码
                this.isUpdate = updateCode(this.picked,this.isUpdate);
            },
            saveUpdate() {//当按键弹起后就恢复原样保存修改的内容
                //1.获取到每个输入框内修改的数字
                let redChanges = document.querySelectorAll('.updateBoxRed');
                let blueChange = document.querySelector('.updateBoxBlue');
                let ballObj = this.checkedBalls.data[this.picked];
                let reds = [];
                let blue = blueChange.value;
                for (let i = 0; i < redChanges.length; i++) {//将修改好的数据存入新数组中
                    let val = redChanges[i].value;
                    if(val>0&&val<34) {
                        if(reds.length == 0) {
                            reds.push(val);
                        }else if(reds.indexOf(val.toString()) == -1){//将数字类型转换为字符创类型判断是否重复
                            reds.push(val);
                        }
                    }else {
                        Toast('红球选号不符合选号规则');
                        return;
                    }

                }
                if(blue > 0 && blue < 17) {
                    ballObj.blue = blue;
                }else {
                    Toast('蓝球选号不符合选号规则');
                    return;
                }
                if(reds.length < 6) {
                    Toast('红球选号不正确');
                    return;
                }
                ballObj.red = reds.sort((a,b) => a - b);
                this.isUpdate = -1;//隐藏输入框

            },
            emptyCodes(){//清空选号列表
                this.buyCount = emptyCodes(this.checkedBalls,this.buyCount);
            }
        }
    }
</script>

<style scoped>
    .checkCode {
        padding: 0 10px;
    }

    /*标题区*/
    .checkCode .title {
        text-align: center;
        border-bottom: 1px solid #a1a1a1;
    }

    .title h4 {
        line-height: 30px;
    }

    .redBalls, .blueBalls {
        border-bottom: 1px solid #e1e1e1;
        display: flex;
        justify-content: space-between;
    }

    .item {
        width: 10%;
        padding: 10px;
        font-weight: 600;
    }

    /*选号区块*/
    .ballsBox {
        width: 90%;
    }

    .ballsBox ul {
        display: flex;
        padding: 0 20px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .ballsBox ul li {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 2px;
        border: 1px solid #e1e1e1;
        border-radius: 50%;
        color: #333;
        font-weight: 600;
        background-color: #f1f1f1;
        cursor: pointer;
    }

    .redBalls .item {
        color: red;
    }

    .redBalls ul li.active {
        color: #fff;
        background-color: red;
    }

    .blueBalls .item {
        color: blue;
    }

    .blueBalls ul li.active {
        color: #fff;
        background-color: blue;
    }

    /*按钮区块*/
    .btns {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
    }

    .confirm {
        padding: 0 40px;
    }

    /*投注信息*/
    .info {
        margin-top: 10px;
    }

    .info p[data-v-7a3a87f4] {
        color: #333;
    }

    .info .content {
        display: flex;
        justify-content: space-between;
    }

    .info .infoBox {
        width: 80%;
        height: 120px;
        border: 1px solid #a1a1a1;
        overflow: scroll;
    }

    .info .infoBox ul {
        padding: 10px;
        margin: 0;
    }

    .info .infoBox li span {
        display: inline-block;
        width: 30px;
        text-align: center;
        padding: 2px;
        color: red;
    }

    .info .infoBox li span:last-child {
        color: blue;
    }

    .info .option {
        width: 20%;
        height: 120px;
        padding-left: 10px;
    }

    .info .option input {
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 18px;
        padding: 4px 6px;
        margin: 0;
    }

    .info .option input:nth-child(2) {
        margin: 15px 0;
    }

    /*当点击修改后出现的样式*/
    .infoBox [class^="updateBox"] {
        width: 20px;
        height: 28px;
        text-align: center;
        padding: 0;
        margin: 0;
        border: none;
        margin: 0 5px;
        background-color: #a1a1a1;
    }

    .infoBox .updateBoxRed {
        color: red;
    }

    .infoBox .updateBoxBlue {
        color: blue;
    }

    .infoBox .updateBtn {
        padding: 0;
        height: 28px;
        background-color: #e1e1e1;
    }
</style>